<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><bean:write property="title" name="eclassForm"/></title>
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="validationWithJs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<script type="text/javascript">
	 function flyToPage() {
		//setAllDateTimePicker();
		var task = document.getElementsByName('task')[0].value;
		var isOpen;
		
		if(task=='updateExamPrep'){
			isOpen =document.forms[0].elements['modelExamPrep.isOpen'].value ;
		}else{
			isOpen='0';
		}
		
		alert('numOfQuestCandidate: ' +document.forms[0].elements['modelExamPrep.numOfQuestCandidate'].value)
		//alert(task);
		if((task=='updateExamPrep' && isOpen=='0')||task=='insertExamPrep'){
			//alert('cekDate : '+cekDate());
			
			var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
			if(examFor.toUpperCase() != "CANDIDATE"){ //utk trainee
				if(cekDate() == true){
					if(cekExamPrepDetSubject()){
						var cek = confirm('Are you sure want to Save Exam Preparation - '+ document.forms[0].elements['modelExamPrep.examPrepId'].value +' ?');
						
						if(cek==true){	
							document.forms[0].elements['modelExamPrep.startHour'].value = getStartDate();
							document.forms[0].elements['modelExamPrep.endHour'].value = document.getElementById('endHour').value;						
							document.forms[0].submit();						
						}	
					}
				}
				else{
					alert('Please Check Your Input Time!');
				}
			}
			else{ // utk Candidate				
				if(validateNumOfQuestion() && cekDuration()){
					var cek = confirm('Are you sure want to Save Exam Preparation - '+ document.forms[0].elements['modelExamPrep.examPrepId'].value +' ?');
					if(cek==true){
						document.forms[0].elements['modelExamPrep.startHour'].value = getStartDate();
						document.forms[0].elements['modelExamPrep.endHour'].value = document.getElementById('endHour').value;
						document.forms[0].submit();
					}
				}			
			}		
		 }else
		 {
			 document.forms[0].elements['modelExamPrep.startHour'].value = getStartDate();
			 document.forms[0].elements['modelExamPrep.endHour'].value = document.getElementById('endHour').value;
			 document.forms[0].submit();
		}
	}
	
	function cekExamPrepDetSubject(){
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		
		//rowList[id].children[1].children[1].value
		for(var i=0; i<rowCount; i++){
			if(!validateNumOfQuestionDet(i)) return false;
			for(var j=i+1; j<rowCount;j++){
				var selectedSubject1 = rowList[i].children[0].children[1].value;
				var selectedSubject2 = rowList[j].children[0].children[1].value;
				//alert('SelectedSubject: '+selectedSubject1+' - '+selectedSubject2);
				if(selectedSubject1 == selectedSubject2) {
					alert('Check subject must be unique!');
					return false;
				}
			}
		}
		return true;
	}
	 
	function cekDuration(){
		var time = document.forms[0].elements['modelExamPrep.duration'].value;
		if(time!=null && time!='' && eval(time)>0){
			return true;
		}
		document.forms[0].elements['modelExamPrep.duration'].value = 60;
		document.forms[0].elements['modelExamPrep.duration'].focus();
		alert('Please Input Duration Time!');
		return false;
	}
	
	function getDate(){
		
		/* alert('getDate 2');
		$('#startDatePickerCandidate').data('datetimepicker').setStartDate(new Date());
		alert('getDate 3');
		
		$('#startDatePickerCandidate').data('datetimepicker').setLocalDate(new Date());
		alert('getDate 1');  */
		var task = document.getElementsByName('task')[0].value;
		var isOpen;
		
		if(task=='updateExamPrep'){
			isOpen = document.forms[0].elements['modelExamPrep.isOpen'].value ;	
		}else{
			isOpen='0';
		}
		
		if((task=='updateExamPrep' && isOpen=='0')||task=='insertExamPrep'){
			document.getElementById('startDateCand').value = document.forms[0].elements['modelExamPrep.startHour'].value;
			document.getElementById('startHour').value = document.forms[0].elements['modelExamPrep.startHour'].value;
			document.getElementById('endHour').value = document.forms[0].elements['modelExamPrep.endHour'].value;
		}
		
		if(!isTaskInsert()){ // utk update
			var strTime1 = document.forms[0].elements['modelExamPrep.startHour'].value;
			var time1 = null;
			var time = null;
			
			if(isExamForTrainee()){
				time = strTime1;
			}
			else{
				time1 = strTime1.split(' ');
				time = time1[0];
			}
			
			var arr = time.split('/');
			var day = arr[0];
			var month = arr[1];
			var date = eval(month-1)+'/'+day+'/'+arr[2];
			var dateInit = new Date(date);
			
			if(!isExamForTrainee()){
				$('#startDatePickerCandidate').data('datetimepicker').setLocalDate(dateInit);
				$('#startDatePickerCandidate').data('datetimepicker').setStartDate(dateInit);
				//alert('set update start date Cand ');
			}
			
			$('#startDatePicker').data('datetimepicker').setLocalDate(dateInit);
			$('#startDatePicker').data('datetimepicker').setStartDate(dateInit);
			
			strTime1 = document.forms[0].elements['modelExamPrep.endHour'].value;
			time1 = null;
			time = null;
			
			if(isExamForTrainee()){
				time = strTime1;
			}
			else{
				time1 = strTime1.split(' ');
				time = time1[0];
			}
			
			arr = time.split('/');
			day = arr[0];
			month = arr[1];
			date = eval(month-1)+'/'+day+'/'+arr[2];
			dateInit = new Date(date);
			
			$('#endDatePicker').data('datetimepicker').setLocalDate(dateInit);
			$('#endDatePicker').data('datetimepicker').setStartDate(dateInit);
		}
		else{
			$('#startDatePickerCandidate').data('datetimepicker').setLocalDate(new Date());
			$('#startDatePickerCandidate').data('datetimepicker').setStartDate(new Date());
			$('#startDatePicker').data('datetimepicker').setLocalDate(new Date());
			$('#startDatePicker').data('datetimepicker').setStartDate(new Date());
			$('#endDatePicker').data('datetimepicker').setLocalDate(new Date());
			$('#endDatePicker').data('datetimepicker').setStartDate(new Date());			
		} 	 	
	}
	 
	function hideField(){
		document.forms[0].elements['modelExamPrep.batchName'].value="";
		document.forms[0].elements['modelExamPrep.startDate'].value="";
		document.forms[0].elements['modelExamPrep.endDate'].value="";
		document.getElementById('insertRow').style.display='none';
	}
	
	function showFieldInsert(){
		document.getElementById('insertRow').style.display='';
	}
	
	function update(id){
		document.forms[0].batchId.value = id;
		document.forms[0].task.value = 'updateBatch';
		document.forms[0].submit();
	}
	
	function flyToPageParam(task) {
		document.forms[0].task.value = task;
		document.forms[0].submit();
	}
	
	function cekDate(){
		var task = document.getElementsByName('task')[0].value;
		var isOpen;
		if(!isExamForTrainee()){ //utk Candidate
			var strTime = getStartDate();
			if(strTime==null) return false;
			else if(strTime=='') return false;
			//if(!isTaskInsert()) return true;
			var timeTemp = strTime.split(' ');
			var arr = timeTemp[0].split('/');
			var day = arr[0];
			var month = arr[1];
			var date1 = month+'/'+day+'/'+arr[2];
			
			var time1 = new Date(date1);
			
			if(time1 < new Date()) return false;
			else return true;
		}
			
		if(task=='updateExamPrep'){
			isOpen =document.forms[0].elements['modelExamPrep.isOpen'].value ;
		}else{
			isOpen='0';
		}
		
		if((task=='updateExamPrep' && isOpen=='0')||task=='insertExamPrep'){
			var strTime = getStartDate();
			if(strTime==null) return false;
			else if(strTime=='') return false;
			
			var endTime = document.getElementById('endHour').value;
			if(endTime==null) return false;
			else if(endTime=='') return false;
			
			var arr = strTime.split('/');
			var day = arr[0];
			var month = arr[1];
			var date1 = month+'/'+day+'/'+arr[2];
			
			var time1 = new Date(date1);
			
			arr = endTime.split('/');
			day = arr[0];
			month = arr[1];
			var date2 = month+'/'+day+'/'+arr[2];
			
			var time2 = new Date(date2);
			var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
			if(examFor.toUpperCase() == "TRAINEE"){
				if(endTime==null) return false;
				else if(endTime=='') return false;
				else if(time2<=time1) return false;
				else if(time2.getDate()==time1.getDate() && time2.getMonth() == time1.getMonth() && time2.getFullYear() == time1.getFullYear()  && time2.getHours() == time1.getHours() && time2.getMinutes() == time1.getMinutes()){
					return false;
				}
			}
			else
			{
				if(date1.toUpperCase().indexOf("undefined")!=-1) return false;
				else if(time1==null) return false;
				else if(time1=="") return false;
				else if(time1.getTime() < new Date().getTime()) return false;
				return true;
				//else return true;
			}
			return true;
		}
		return false;
	}
	
	function isExamForTrainee(){
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		if(examFor.toUpperCase() == "CANDIDATE"){
			return false;
		}
		return true;
	}
	
	function isTaskInsert(){
		var task = document.getElementsByName('task')[0].value;
		if(task.toUpperCase() =='INSERTEXAMPREP'){
			return true;
		}
		return false;
	}
	
	function checkNextButton() {	
		var task = document.getElementsByName('task')[0].value;
		var isOpen;
		
		if(task=='updateExamPrep'){
			isOpen =document.forms[0].elements['modelExamPrep.isOpen'].value ;
		}else{
			isOpen='0';
		}	
		
		if(task=='updateExamPrep' && isOpen=='1'){
				document.getElementById('manageButton').style.display='none';
		}
		
		var examFor=document.forms[0].elements['modelExamPrep.examFor'].value ;
		var today = new Date();
		var inptDate = document.forms[0].elements['modelExamPrep.startHour'].value;
		var arrSpace = inptDate.split(' ');
		var arr = arrSpace[0].split('/');
		var day = arr[0];
		var month = arr[1];
		var year = arr[2];
		var date = month+'/'+day+'/'+year;
		var status= document.forms[0].elements['modelExamPrep.status'].value;
		var todayDate=eval(today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
		//alert(todayDate+" "+date+" "+examFor);
	
		if(examFor=='Candidate' && date==todayDate && status == '1'){
			document.getElementById('manageButton').style.display='none';
		}
	}
	
	function changeButton(){
		var task = document.getElementsByName('task')[0].value;
		var isOpen;
		
		if(task=='updateExamPrep'){
			isOpen =document.forms[0].elements['modelExamPrep.isOpen'].value ;
		}else{
			isOpen='0';
		}
		var isActive =document.forms[0].elements['modelExamPrep.status'].value ;
		
		if(task=='updateExamPrep' && isOpen=='1' && isActive=='0'){
				document.getElementById('manageButton').style.display='';
			}
		
		if(task=='updateExamPrep' && isOpen=='1' && isActive=='1'){
			document.getElementById('manageButton').style.display='none';
		}
	}
	
	function validateNumOfQuestion(){
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		if(examFor.toUpperCase() == "CANDIDATE"){
			var limitMaxQuest = document.getElementById('numberOfQuest').value;
			var numOfQuest = document.forms[0].elements['modelExamPrep.numOfQuestCandidate'].value;
			if(numOfQuest!=null && numOfQuest!='' && eval(numOfQuest)>0 && eval(numOfQuest)<=eval(limitMaxQuest)){ 
				return true;
			}
			alert('Please Input Number Of Question!');
			document.forms[0].elements['modelExamPrep.numOfQuestCandidate'].value = limitMaxQuest;
			document.forms[0].elements['modelExamPrep.numOfQuestCandidate'].focus();
			return false;
		}
		return true;
	}
	
	
	function showNmberOfQuestion() {		
		setDisplay();
		setAllDateTimePicker();
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		if(examFor.toUpperCase() == "CANDIDATE"){
			var task = 'getNumOfQuest';
			$.ajax({
	            type: "POST",
	            url: "/WebFinalProject/Eclass.do",
	            data: "modelExamPrep.examFor=" + examFor + "&task=" + task,
	            success: function(response){
	                $('#numOfQuest').html(response);
	            },
	            error: function(e){
	                alert('Error: ' + e);
	            }
	        });
			
			//Rere, 28 Des 2013 : hide detail for candidate
			document.getElementById("headerDetail").setAttribute("style", "display:none;");
			document.getElementById("bodyDetail").setAttribute("style", "display:none;");
			document.getElementById("addButtonDetail").setAttribute("style", "display:none;");
			//alert("5");
		}else{
			//Rere, 28 Des 2013 : show detail for trainee
			document.getElementById("headerDetail").setAttribute("style", "display:'';");
			document.getElementById("bodyDetail").setAttribute("style", "display:'';");
			document.getElementById("addButtonDetail").setAttribute("style", "display:'';");
		}
		//showSessionCombo();
	}
	
	function setDisplay(){
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		if(examFor.toUpperCase() == "CANDIDATE"){
			//alert('setDisplay: CANDIDATE');
			document.getElementById('endHour4Trainee').style.display='none';
			document.getElementById('batchClassRow').style.display='none';
			document.getElementById('startHour4Trainee').style.display='none';
			
			
			document.getElementById('startDate4Candidate').style.display='';
			document.getElementById('numOfQuestCan').style.display='';
			document.getElementById('durationRow').style.display='';
		}
		else{
			//alert('setDisplay: TRAINEE');
			document.getElementById('startHour4Trainee').style.display='';
			document.getElementById('endHour4Trainee').style.display='';
			document.getElementById('batchClassRow').style.display='';
			
			document.getElementById('startDate4Candidate').style.display='none';
			document.getElementById('numOfQuestCan').style.display='none';
			document.getElementById('durationRow').style.display='none';
		}
		//alert('setDisplay');
	}
	
	function getStartDate(){
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		//alert('0');
		if(examFor.toUpperCase() == "CANDIDATE"){
			//alert('CANDIDATE getstartdate: '+document.getElementById('startDateCand').value)
			return document.getElementById('startDateCand').value;
		}
		//alert('1');
		//alert('CANDIDATE getstartdate: '+document.getElementById('startHour').value)
		return document.getElementById('startHour').value;
	}
	
	function setAllDateTimePicker(){
		//alert('setAllDateTimePicker init!!');
		var today = new Date();
		var inptDate = document.forms[0].elements['modelExamPrep.startHour'].value;
		if(inptDate == null) inptDate = today.getDate()+'/'+eval(eval(today.getMonth())+1)+'/'+today.getFullYear()+" 00:00:00";
		else if(inptDate == '') inptDate = today.getDate()+'/'+eval(eval(today.getMonth())+1)+'/'+today.getFullYear()+" 00:00:00";
		if(document.forms[0].elements['modelExamPrep.examFor'].value.toUpperCase() == "CANDIDATE"){
			// buat start Date Candidate
			var arrSpace = inptDate.split(' ');
			var arr = arrSpace[0].split('/');
			var day = arr[0];
			var month = arr[1];
			var year = arr[2];
			var date = day+'/'+month+'/'+year;//+" 00:00:00";
			document.getElementById('startDateCand').value = date;
			var startDateCand = new Date();
			startDateCand.setFullYear(year,eval(month-1),day);
			//alert(startDateCand);
			$('#startDatePickerCandidate').data('datetimepicker').setLocalDate(startDateCand);
			$('#startDatePickerCandidate').data('datetimepicker').setStartDate(startDateCand);
			$('#startDatePickerCandidate').datetimepicker('update');
		}
		else{
			// buat start Hour Trainee
			//var inptDate = document.forms[0].elements['modelExamPrep.startHour'].value;
			var arr = inptDate.split('/');
			var day = arr[0];
			var month = arr[1];
			var date = month+'/'+day+'/'+arr[2];
			var dateInit = new Date(date);
			
			$('#startDatePicker').data('datetimepicker').setLocalDate(dateInit);
			$('#startDatePickerCandidate').data('datetimepicker').setLocalDate(dateInit);
			$('#startDatePickerCandidate').data('datetimepicker').setStartDate(dateInit);
			$('#startDatePicker').datetimepicker('update');
			
			// buat end Hour Trainee
			inptDate = document.forms[0].elements['modelExamPrep.endHour'].value;
			arr = inptDate.split('/');
			day = arr[0];
			month = arr[1];
			date = month+'/'+day+'/'+arr[2];
			var dateEnd = new Date(date);
			//alert('endHour : '+date);
			//alert('dateEnd : '+dateEnd);
			
			$('#endDatePicker').data('datetimepicker').setLocalDate(dateEnd);
			$('#endDatePicker').datetimepicker('update');			
		}
		//alert('setAllDateTimePicker : ');
	}	
	
	function setEndDateBasedOnStartDate(e){ 		
		var task = document.getElementsByName('task')[0].value;		
		//$('#startDatePicker').data('datetimepicker').setStartDate(e.localDate);
		
		if(task=='insertExamPrep'){
			$('#endDatePicker').data('datetimepicker').setStartDate(e.date);
			$('#endDatePicker').data('datetimepicker').setLocalDate(e.localDate);
		}
		else{
			var now = new Date();
			var endDate = new Date(document.getElementById('endHour').value);
			if(endDate < e.localDate){
				$('#endDatePicker').data('datetimepicker').setLocalDate(e.localDate);
				$('#endDatePicker').data('datetimepicker').setStartDate(e.date);
			}	
		}		
		$('#endDatePicker').datetimepicker('update');
	} 
	
// 	Rere, 27 Des 2013
	function resetNumberAnswer(){
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		
		for(var i=0; i<rowCount; i++){
			(rowList[i].getElementsByTagName("img"))[0].id = i;
			(rowList[i].getElementsByTagName("select"))[0].id = i;			
			rowList[i].children[1].children[0].id = i;
			showDetailNumberOfQuestion(i);
		}
	}
	
	function appendText() {	
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		var row;
		
		var newRowHTML = document.getElementById("examPrepDetailInsertRow");  //get inner HTML form		 	   
 	   	var newRow = newRowHTML.innerHTML;
 		row = tableList.insertRow(rowCount);  //insert new row into table 		
		row.innerHTML = newRow;
 		row.id = "examPrepDetailInsertRow";
		
		//reset fields
		var textNode = row.children[1].children[0];  //tracing node
 	    var selectNode = row.getElementsByTagName("select");
 	    textNode.value = "0";
 	    selectNode[0].selectedIndex = 0;	
 	   	resetNumberAnswer();  //reset value & id	 	        
	}
	
	function deleteText(rowID){
		//alert(rowID);
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length; 
		var rowList = tableList.getElementsByTagName("tr");
		
		if(rowCount <= 1){
			alert("Class must be at least 1!");
		}else{			
			tableList.deleteRow(rowID);
		}				
		resetNumberAnswer();
	}
	
	function showDetailNumberOfQuestion(id) {
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		classId = rowList[id].children[0].children[1].value;
		
		var task = 'getNumOfQuest';
		$.ajax({
            type: "POST",
            url: "/WebFinalProject/Eclass.do",
            data: "modelExamPrepDetail.classId=" + classId + "&task=" + task,
            success: function(response){
            	rowList[id].children[1].children[1].value = response;
            	rowList[id].children[1].children[0].focus();
            },
            error: function(e){
                alert('Error: ' + e);
            }
        });
	}
	
	function validateNumOfQuestionDet(id){
		var examFor = document.forms[0].elements['modelExamPrep.examFor'].value;
		
		if(examFor.toUpperCase() == "TRAINEE"){
			var tableList = document.getElementById("examPrepDetailTable"); //find table
			var rowList = tableList.getElementsByTagName("tr");
			var limitMaxQuest = rowList[id].children[1].children[1].value;
			var numOfQuest = rowList[id].children[1].children[0].value;
			
			if(numOfQuest!=null && numOfQuest!='' && eval(numOfQuest)>0 && eval(numOfQuest)<=eval(limitMaxQuest)){ 
				return true;
			}
			alert('Please Input Correct Number Of Question Subject Detail!');
			rowList[id].children[1].children[0].value = limitMaxQuest;
			rowList[id].children[1].children[0].focus();
			return false;
		}
		return true;
	}
	
	
	function hanyaNumberAllowed(id) {
		var tableList = document.getElementById("examPrepDetailTable"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var isi = rowList[id].children[1].children[0].value;

		while (!isNumber(isi)) {
			isi = isi.substring(0, isi.length - 1);
		}
		rowList[id].children[1].children[0].value = isi;
	}
	
</script>
</head>
<body onload="javascript:getDate();checkNextButton();showNmberOfQuestion(); resetNumberAnswer()">
	<center>
		<table width="100%" class="bodyTable boxShadow">
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">ACE Management > 
					<a href="javascript:flyToPage('listExamPrep');">ACE-Examination</a> > 
					<bean:write property="title" name="eclassForm"/>
				</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br><br>
					<html:form action="/Eclass" method="post">
						<html:hidden property="task" name="eclassForm" />
						<%-- <h1><bean:write property="modelExamPrep.startHour" name="eclassForm"/></h1> --%>
						<html:hidden property="modelExamPrep.startHour" name="eclassForm"></html:hidden>
						<logic:equal value="updateExamPrep" property="task" name="eclassForm">
							<html:hidden property="modelExamPrep.isOpen" name="eclassForm" />
						</logic:equal>
						<table width="40%" align="center" border="0" class="boxShadow">
							<tr>
								<td colspan="3" align="center" class="formListStyle headerBox formHeaderBackground">
									<bean:write property="title" name="eclassForm"/>
								</td>
							</tr>
							<tr>
								<td class="formListStyle leftAlign">Exam Id</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
									<bean:write property="modelExamPrep.examPrepId" name="eclassForm"/>
									<html:hidden property="modelExamPrep.examPrepId" name="eclassForm" />
								</td>
							</tr>
							<tr>
								<td class="formListStyle leftAlign">Exam For</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
									<html:select styleClass="comboStretch" property="modelExamPrep.examFor" onchange="showNmberOfQuestion();">
										<html:option value="Candidate">Candidate</html:option>
										<html:option value="Trainee">Trainee</html:option>
									</html:select>
								</td>
							</tr>
							<tr id="numOfQuestCan">
									<td class="formListStyle leftAlign">Number Of Question</td>
									<td class="formListStyle">:</td>
									<td class="formListStyle leftAlign">
										<%-- <html:hidden property="modelExamPrep.examPrepId" name="eclassForm" /> --%>
										<html:text styleClass="textSmall" property="modelExamPrep.numOfQuestCandidate" name="eclassForm" size="4" maxlength="3" onkeyup="javascript:onlyNumberAllowed('modelExamPrep.numOfQuestCandidate');validateNumOfQuestion();"/>
										/ <span id = "numOfQuest"></span>
									</td>
							</tr>
							<%-- <tr>
								<td>Batch ID</td>
								<td>:</td>
								<td>
									<html:text property="modelExamPrep.batchId" name="eclassForm"></html:text>
								</td>
							</tr>
							 --%>
							<tr id = "batchClassRow">
								<td class="formListStyle leftAlign">Batch Class</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
									<html:select styleClass="comboStretch" property="modelExamPrep.batchClassId" name="eclassForm">
										<logic:notEmpty name="eclassForm" property="listBatchClass">
										 	<html:optionsCollection name="eclassForm" property="listBatchClass" label="batchClassName" value="batchClassId"/>
										</logic:notEmpty>
									</html:select>
								</td>
							</tr>
							<tr id="startDate4Candidate">							
								<td class="formListStyle leftAlign">Start Date</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
								<logic:equal value="insertExamPrep" property="task" name="eclassForm">											
										<div id="startDatePickerCandidate" class="input-append">
											<input  type="text" id="startDateCand" data-format="dd/MM/yyyy" readonly="readonly"/>&nbsp;&nbsp;
											<span class="add-on" style="height:12px;">
												<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											</span>
										</div>
										<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
										<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
										<script type="text/javascript" src="js/bootstrap.min.js"></script>
										<script type="text/javascript">
											$('#startDatePickerCandidate').datetimepicker({
												format: 'dd/MM/yyyy',
												pickTime: false,
												maskInput: true,
												startDate: new Date()
											});
										</script>
								</logic:equal>
								<logic:equal value="updateExamPrep" property="task" name="eclassForm">											
										<div id="startDatePickerCandidate" class="input-append">
											<input  type="text" id="startDateCand" data-format="dd/MM/yyyy" readonly="readonly"/>
											<span class="add-on" style="height:12px;">
											<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											</span>
										</div>
										<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
										<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
										<script type="text/javascript" src="js/bootstrap.min.js"></script>
										<script type="text/javascript">
											$('#startDatePickerCandidate').datetimepicker({
												format: 'dd/MM/yyyy',
												pickTime: false,
												maskInput: true
											});
										</script>									
								</logic:equal>
								</td>							
							</tr>
							<tr id="startHour4Trainee">
								<td class="formListStyle leftAlign">Start Hour</td>	
								<td class="formListStyle">:</td>							
								<td class="formListStyle leftAlign">
								<logic:equal value="insertExamPrep" property="task" name="eclassForm">											
										<div id="startDatePicker" class="input-append">
											<input  type="text" id="startHour" data-format="dd/MM/yyyy hh:mm:ss" readonly="true"></input>
											<span class="add-on" style="height:12px;">
											<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											</span>
										</div>
										<script type="text/javascript">
											$('#startDatePicker').datetimepicker({
												format: 'dd/MM/yyyy hh:mm:ss',
												maskInput: true
											});
											$('#startDatePicker').datetimepicker().on('changeDate', function(e) {
													setEndDateBasedOnStartDate(e);
												});
										</script>
								</logic:equal>
								<logic:equal value="updateExamPrep" property="task" name="eclassForm">
										<div id="startDatePicker" class="input-append">
											<input  type="text" id="startHour" data-format="dd/MM/yyyy hh:mm:ss" readonly="true"></input>
											<span class="add-on" style="height:12px;">
											<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											</span>
										</div>
										<script type="text/javascript">
											$('#startDatePicker').datetimepicker({
												format: 'dd/MM/yyyy hh:mm:ss',
												maskInput: true
											});
											$('#startDatePicker').datetimepicker().on('changeDate', function(e) {
												setEndDateBasedOnStartDate(e);
											});
										</script>
								</logic:equal>
								</td>
							</tr>
							<tr id="endHour4Trainee">
								<td class="formListStyle leftAlign">End Hour</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
								<logic:equal value="insertExamPrep" property="task" name="eclassForm">
										<html:hidden property="modelExamPrep.endHour" name="eclassForm"></html:hidden>										
											<div id="endDatePicker" class="input-append">
												<input  type="text" id="endHour" data-format="dd/MM/yyyy hh:mm:ss" readonly="true"></input>
												<span class="add-on" style="height:12px;">
												<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
												</span>
											</div>
											<script type="text/javascript">
												$('#endDatePicker').datetimepicker({
													format: 'dd/MM/yyyy hh:mm:ss',
													maskInput: true
												});
											</script>
								</logic:equal>
								<logic:equal value="updateExamPrep" property="task" name="eclassForm">
										<html:hidden property="modelExamPrep.endHour" name="eclassForm"></html:hidden>											
											<div id="endDatePicker" class="input-append">
												<input  type="text" id="endHour" data-format="dd/MM/yyyy hh:mm:ss" readonly="true"></input>
												<span class="add-on" style="height:12px;">
												<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
												</span>
											</div>
											<script type="text/javascript">
												$('#endDatePicker').datetimepicker({
													format: 'dd/MM/yyyy hh:mm:ss',
													maskInput: true
												});
											</script>									
								</logic:equal>
								</td>
							</tr>
							<tr id="durationRow">
								<td class="formListStyle leftAlign">Duration</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
									<html:text styleClass="textSmall" property="modelExamPrep.duration" name="eclassForm" size="4" maxlength="3" onkeyup="javascript:onlyNumberAllowed('modelExamPrep.duration');"/> (Minutes)
								</td>
							</tr>							
							<tr>
								<td class="formListStyle leftAlign">Status</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign">
									<html:select styleClass="comboStretch" property="modelExamPrep.status" onchange="javascript:changeButton();">
										<html:option value="0">Inactive</html:option>
										<html:option value="1">Active</html:option>
									</html:select>
									<br>
								</td>
							</tr>
							
<!-- 							Exam Prep Detail -->
							
							<tr id="headerDetail">
								<td colspan="3" align="center" class="formListStyle headerBox formHeaderBackground">Exam Preparation Detail List</td>
							</tr>
							<tr id="bodyDetail">
								<td colspan="3" align="center" class="formListStyle">
									<table width="100%" id="examPrepDetailTable">										
										<logic:notEmpty name="eclassForm" property="listExamPrepDetail">
											<logic:iterate id="listData" name="eclassForm" property="listExamPrepDetail">
												<tr id="examPrepDetailInsertRow" align="center">
													<td class="formListStyle" width="55%">
														<html:hidden property="examPrepDetailId" name="listData"></html:hidden>											
														<html:select styleClass="comboStretch" name="listData" property="classId" onchange="javascript:showDetailNumberOfQuestion(this.id);">
															<logic:notEmpty name="eclassForm" property="listClass">
															 	<html:optionsCollection name="eclassForm" property="listClass" label="className" value="classId"/>
															</logic:notEmpty>
														</html:select>
													</td>
													<td class="formListStyle">
														<html:text styleClass="textSmall centerAlign" size="3" property="noOfQuestion" name="listData"  maxlength="3" onchange="javascript:validateNumOfQuestionDet(this.id);" onkeyup="javascript:hanyaNumberAllowed(this.id);"></html:text>
<!-- 														/ <span id="numOfQuest"><input type="text" class="textSmall" /></span> -->
														/ <html:text property="totalNoOfQuestion"  name="listData" disabled="true" styleClass="textSmall centerAlign"></html:text>
													</td>
													<td align="center" class="formListStyle" width="10%">
														<img src="images/cancelButton.png" title="delete" style="cursor: pointer;" onclick="javascript:deleteText(this.id);"/>
										            </td>
												</tr>
											</logic:iterate>
										</logic:notEmpty>								
									</table>
								</td>
							</tr>
							<tr id="addButtonDetail">
								<td align="center" style="padding:5px 7px;" colspan="3">
									<div title="add detail" style="cursor:pointer;" onclick="javascript:appendText();">
										<table>
											<tr>
												<td style="vertical-align: middle; padding:2px;"><img src="images/addButton.png"></td>
												<td style="vertical-align: middle; padding:2px;"><b>Add Detail</b></td>
											</tr>
										</table>
									</div>
								</td>
							</tr>
<!-- 							--------------------------------- -->
							
							<tr>
								<td colspan="3" align="center">
									<table>
										<tr>
											<td colspan="2" align="right" class="formListStyle">
												<table id="manageButton" title="save" class="buttonStyle" style="cursor: pointer;" onclick="javascript:flyToPage();">
													<tr>
														<td style="vertical-align:middle;"><img src="images/saveButton.png"/></td>
														<td style="vertical-align:middle;"><b>&nbsp;Save&nbsp;</b></td>
													</tr>
												</table>
											</td>
											<td colspan="2" align="left" class="formListStyle">			
												<table title="cancel" class="buttonStyle" style="cursor: pointer;" onclick="javascript:flyToPageParam('listExamPrep');">
													<tr>
														<td style="vertical-align:middle;"><img src="images/cancelButton.png"/></td>
														<td style="vertical-align:middle;"><b>&nbsp;Cancel&nbsp;</b></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
<!-- 									<input type="button" class="buttonStyle" value="Next" onclick="javascript:flyToPage();" id="manageButton" >&nbsp; -->
<!-- 									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPageParam('listExamPrep');"> -->
								</td>
							</tr>
				
						</table>
					</html:form><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>	
</body>
</html>